<template>
<div class="app-container">
<div class="app-container_conter">
  <el-row>
    <el-col :span="22">
      <h2 style="text-align: center">用户资料上传</h2>
    </el-col>
    <el-col :span="2">
      <div style="height:60px;line-height: 60px">
        <el-button style="width: 100px" type="primary" @click="getBack">返回</el-button>
      </div>
    </el-col>
  </el-row>
  <el-form style="width: 80%;margin:0 auto" ref="form" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="身份证" prop="identity_card" ref="uploadElement">
<!--        :http-request="handleUpdateForm"   "-->
          <div v-if="show"
               style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #d9d9d9" @click="getidCard">
            <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9" ></i>
          </div>
          <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard" >
            <img v-for="(item,index) in form.identity_card" style="margin-right: 5px;margin-bottom: 5px"  :src="url+item" width="130" height="100px">
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="住院小结" prop="hospitalized">
          <div v-if="show1"
               style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #d9d9d9"  @click="getidCard1">
            <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
          </div>
          <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard1">
            <img  v-for="(item,index) in form.hospitalized" :src="url+item" style="margin-right: 5px;margin-bottom: 5px" width="130" height="100px">
          </div>
        </el-form-item>
      </el-col>

    </el-row>
   <el-row>
     <el-col :span="12">
       <el-form-item label="病历本" prop="medical_record_book">
         <div v-if="show2"
              style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #d9d9d9"  @click="getidCard2">
           <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
         </div>
         <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard2">
           <img v-for="(item,index) in form.medical_record_book" style="margin-right: 5px;margin-bottom: 5px" :src="url+item" width="130" height="100px">
         </div>
       </el-form-item>
     </el-col>
     <el-col :span="12">
       <el-form-item label="医疗发票" prop="hospital_invoice">
         <div v-if="show3"
              style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #d9d9d9" @click="getidCard3">
           <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
         </div>
         <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard3">
           <img v-for="(item,index) in form.hospital_invoice"   :src="url+item" style="margin-right: 5px;margin-bottom: 5px" width="130" height="100px">
         </div>
       </el-form-item>
     </el-col>
   </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="用药清单" prop="medications">
          <div v-if="show4"
               style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #d9d9d9" @click="getidCard4">
            <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
          </div>
          <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard4">
            <img v-for="(item,index) in form.medications" :src="url+item" style="margin-right: 5px;margin-bottom: 5px" width="130" height="100px">
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="其他图片" prop="other">
          <div v-if="show5"
               style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #d9d9d9"  @click="getidCard5">
            <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
          </div>
          <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard5">
            <img v-for="(item,index) in form.other" :src="url+item" style="margin-right: 5px;margin-bottom: 5px" width="130" height="100px">
          </div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div style="text-align: center">
          <el-button style="width: 150px;" type="info" @click="getCenter('form')">重置</el-button>
          <el-button style="width: 150px" type="primary" @click="getSubmit('form')">提交</el-button>
        </div>

      </el-col>
    </el-row>
  </el-form>
</div>
<!-- 上传身份证-->
  <el-dialog :title="upload.title" :visible.sync="upload.open" width="650px" append-to-body>
    <el-upload
      ref="upload"
      :limit="10"
      action
      :before-upload="beforeUploadForm"
      :auto-upload="false"
      :show-file-list="true"
      :http-request="handleUpdateForm"
      multiple
      :file-list="fileList"
      drag
    >
      <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button type="info" @click="upload.open= false">取 消</el-button>
    </div>
  </el-dialog>
<!--  上传住院小结-->
  <el-dialog :title="upload1.title" :visible.sync="upload1.open" width="650px" append-to-body>
    <el-upload
      ref="upload1"
      :limit="10"
      action
      :http-request="handleUpdateForm1"
      :before-upload="beforeUploadForm1"
      :auto-upload="false"
      :show-file-list="true"
      multiple
      :file-list="fileList1"
      drag
    >
      <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>

      <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm1">确 定</el-button>
      <el-button type="info" @click="upload1.open = false">取 消</el-button>
    </div>
  </el-dialog>
<!--  上传病例本-->
  <el-dialog :title="upload2.title" :visible.sync="upload2.open" width="650px" append-to-body>
    <el-upload
      ref="upload2"
      action
      :limit="10"
      :http-request="handleUpdateForm2"
      :before-upload="beforeUploadForm2"
      :auto-upload="false"
      :show-file-list="true"
      multiple
      :file-list="fileList2"
      drag
    >
      <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>

      <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm2">确 定</el-button>
      <el-button type="info" @click="upload2.open = false">取 消</el-button>
    </div>
  </el-dialog>
  <el-dialog :title="upload3.title" :visible.sync="upload3.open" width="650px" append-to-body>
    <el-upload
      ref="upload3"
      action
      :limit="10"
      :http-request="handleUpdateForm3"
      :before-upload="beforeUploadForm3"
      :auto-upload="false"
      :show-file-list="true"
      multiple
      :file-list="fileList3"
      drag
    >
      <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>

      <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm3">确 定</el-button>
      <el-button type="info" @click="upload3.open = false">取 消</el-button>
    </div>
  </el-dialog>
  <el-dialog :title="upload4.title" :visible.sync="upload4.open" width="650px" append-to-body>
    <el-upload
      ref="upload4"
      action
      :limit="10"
      :http-request="handleUpdateForm4"
      :before-upload="beforeUploadForm4"
      :auto-upload="false"
      :show-file-list="true"
      multiple
      :file-list="fileList4"
      drag
    >
      <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>

      <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm4">确 定</el-button>
      <el-button type="info" @click="upload4.open = false">取 消</el-button>
    </div>
  </el-dialog>
  <el-dialog :title="upload5.title" :visible.sync="upload5.open" width="650px" append-to-body>
    <el-upload
      ref="upload5"
      action
      :limit="10"
      :http-request="handleUpdateForm5"
      :before-upload="beforeUploadForm5"
      :auto-upload="false"
      :show-file-list="true"
      multiple
      :file-list="fileList5"
      drag
    >
      <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>

      <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm5">确 定</el-button>
      <el-button type="info " @click="upload5.open = false">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {uploadTmage1,uploadTmage} from "@/api/base/template";
import {addRepordRecord, uploadDate} from "@/api/insurance/repordRecord"
export default {
  name: "repordImage",
  data(){
    return{
      url:process.env.VUE_APP_BASE_API,//地址
      show: true,//判断上传图片显示隐藏
      show1: true,//判断上传图片显示隐藏
      show2: true,//判断上传图片显示隐藏
      show3: true,//判断上传图片显示隐藏
      show4: true,//判断上传图片显示隐藏
      show5: true,//判断上传图片显示隐藏
      fileList:[],
      fileList1:[],
      fileList2:[],
      fileList3:[],
      fileList4:[],
      fileList5:[],
      uploadUrl:process.env.VUE_APP_BASE_API + "/common/batch/uploadImage",
      //上传身份证
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      //上传住院小结
      upload1: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      //上传病例本
      upload2: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      //上传医疗发票
      upload3: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      //上传用药清单
      upload4: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      //上传其他图片
      upload5: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      // 状态字典
      statusOptions: [],
      form: {
        createBy: null,
        createTime: null,
        reportId:'',
        id: null,
        identity_card:[],//身份证图片地址
        hospitalized:[],//住院小结地址
        medical_record_book:[],//病例本图片地址
        hospital_invoice:[],//医疗发票地址
        medications:[],//用药清单地址
        other:[],//其他图片地址
        status:'',//状态
      },
      // 表单校验
      rules: {
        idCard: [
          {required:false, message: '请上传身份照片'}
        ],
        hospitalized: [
          {required: false, message: '请上住院小结凭证',}
        ],
        medical_record_book: [
          {required: false, message: '请上传病历凭证', trigger: 'change'}
        ],
        hospital_invoice: [
          {required: false, message: '请上传医疗发票凭证', trigger: 'change'}
        ],
        medications: [
          {required: false, message: '请上传用药清单凭证', trigger: 'change'}
        ],
        other: [
          {required: false, message: '请上传其他图片', trigger: 'change'}
        ]
      }

      }
  },
  created() {
    this.form.reportId=this.$route.query.id;
    // console.log('form',this.form)
    this.getDicts("common_status").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods:{
    //重置数据
    getCenter(form){
      this.form.identity_card=[];
      this.form.hospitalized=[];
      this.form.medical_record_book=[];
      this.form.hospital_invoice=[];
      this.form.medications=[];
      this.form.other=[];
      if (this.form.identity_card.length==0){
        this.show=true;
      }else {
        this.show=false;
      }
      if (this.form.hospitalized.length==0){
        this.show1=true;
      }else {
        this.show1=false;
      }
      if (this.form.medical_record_book.length==0){
        this.show2=true;
      }else {
        this.show2=false;
      }
      if (this.form.hospital_invoice.length==0){
        this.show3=true;
      }else {
        this.show3=false;
      }
      if (this.form.medications.length==0){
        this.show4=true;
      }else {
        this.show4=false;
      }
      if (this.form.other.length==0){
        this.show5=true;
      }else {
        this.show5=false;
      }

    },
    //返回上一页
    getBack(){
      this.$router.back(-1);
    },
    //提交数据
    getSubmit(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.identity_card.length!=0 || this.form.hospitalized.length!=0 || this.form.medical_record_book.length!=0 || this.form.hospital_invoice.length!=0 || this.form.medications.length!=0 || this.form.other.length!=0){
            var form1={
              createBy:this.form.createBy,
              createTime: this.form.createTime,
              reportId:this.form.reportId,
              id:this.form.reportId,
              identity_card:null,//身份证图片地址
              hospitalized:null,//住院小结地址
              medical_record_book:null,//病例本图片地址
              hospital_invoice:null,//医疗发票地址
              medications:null,//用药清单地址
              other:null,//其他图片地址
              status:this.form.status,//状态
            }
            if (this.form.identity_card.length!=0){
              form1.identity_card=this.form.identity_card
            }
            if (this.form.hospitalized.length!=0){
              form1.hospitalized=this.form.hospitalized
            }
            if (this.form.medical_record_book.length!=0){
              form1.medical_record_book=this.form.medical_record_book
            }
            if (this.form.hospital_invoice.length!=0){
              form1.hospital_invoice=this.form.hospital_invoice
            }
            if (this.form.medications.length!=0){
              form1.medications=this.form.medications
            }
            if (this.form.other.length!=0){
              form1.other=this.form.other
            }

            console.log('form1',form1)
            uploadDate(form1).then(res=>{
              this.$message({
                message: res.msg,
                type: 'success'
              });
              if(res.code==1){

                this.$router.push({
                  path:'/business/successfully/index',
                  query:{
                    reportId:this.form.reportId
                  }
                })
              }


              // console.log('res提交资料',res)
            })
            // console.log('576868',this.form)
          }else {
            // console.log('2433',this.form)
            this.$router.push({
              path:'/business/successfully/index',
              query:{
                reportId:this.form.reportId
              }
            })
          }

        }
      })
    },
    getidCard(){
      this.upload.open=true;
      this.upload.title="上传身份证"
    },
    getidCard1(){
      this.upload1.open=true;
      this.upload1.title="上传住院小结"
    },
    getidCard2(){
      this.upload2.open=true;
      this.upload2.title="上传病例本"
    },
    getidCard3(){
      this.upload3.open=true;
      this.upload3.title="上传医疗发票"
    },
    getidCard4(){
      this.upload4.open=true;
      this.upload4.title="上传用药清单"
    },
    getidCard5(){
      this.upload5.open=true;
      this.upload5.title="上传其他图片"
    },
    // 上传身份证式显示
    beforeUploadForm(file) {
      // console.log('file12', file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('只能是png/jpg/jpeg格式!');
      }
      if (!isLt2M) {
        this.$message.error('大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传身份证
    handleUpdateForm(param) {
      // console.log('param', param)
      this.fileList.push(param.file);
      // console.log('fileListdf', this.fileList)
    },
    submitFileForm(){
      this.$refs.upload.submit();
      let that = this;
      let formData = new FormData();
      this.fileList.forEach(v=>{
        formData.append('files',v);
      })

      uploadTmage1(formData).then(response => {
        this.fileList=[];
        // this.urlImage = response.url;
        this.form.identity_card = response.fileName
        // this.formData.seal = response.fileName;
        if (this.form.identity_card.length !=0) {
          this.show = false;
        } else {
          this.show = true;
        }
        this.upload.open=false
        // console.log('res', response)

      })
    },
    // 上传住院小结格式显示
    beforeUploadForm1(file) {
      // console.log('file12',file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('只能是png/jpg/jpeg格式!');

      }
      if (!isLt2M) {
        this.$message.error('大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传住院小结
    handleUpdateForm1(param) {
      this.fileList1.push(param.file);
    },
    submitFileForm1(){
      this.$refs.upload1.submit();
      let that = this;
      let formData = new FormData();
      this.fileList1.forEach(v=>{
        formData.append('files',v);
      })
      uploadTmage1(formData).then(response => {
        this.fileList1=[];
        // this.urlImage = response.url;
        this.form.hospitalized = response.fileName
        // this.formData.seal = response.fileName;
        if ( this.form.hospitalized.length != 0) {
          this.show1 = false;
        } else {
          this.show1 = true;
        }
        this.upload1.open=false
        // console.log('res', response)
      })
    },
    // 上传病例本显示
    beforeUploadForm2(file) {
      // console.log('file12',file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('只能是png/jpg/jpeg格式!');

      }
      if (!isLt2M) {
        this.$message.error('大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传病例本
    handleUpdateForm2(param) {
      this.fileList2.push(param.file);

    },
    submitFileForm2(){
      this.$refs.upload2.submit();
      let that = this;
      let formData = new FormData();
      this.fileList2.forEach(v=>{
        formData.append('files',v);
      })
      uploadTmage1(formData).then(response => {
        this.fileList2=[];
        // this.urlImage = response.url;
        this.form.medical_record_book = response.fileName
        // this.formData.seal = response.fileName;
        if (this.form.medical_record_book.length!= 0) {
          this.show2 = false;
        } else {
          this.show2 = true;
        }
        this.upload2.open=false
        // console.log('res', response)
      })
    },
    // 上传医疗发票式显示
    beforeUploadForm3(file) {
      // console.log('file12',file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('只能是png/jpg/jpeg格式!');

      }
      if (!isLt2M) {
        this.$message.error('大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传医疗发票
    handleUpdateForm3(param) {
      this.fileList3.push(param.file);
    },
    submitFileForm3(){
      this.$refs.upload3.submit();
      let that = this;
      let formData = new FormData();
      this.fileList3.forEach(v=>{
        formData.append('files',v);
      })
      uploadTmage1(formData).then(response => {
        this.fileList3=[];
        // this.urlImage = response.url;
        this.form.hospital_invoice = response.fileName
        if ( this.form.hospital_invoice.length != 0) {
          this.show3 = false;
        } else {
          this.show3 = true;
        }
        this.upload3.open=false
        // console.log('res', response)
      })
    },
    // 上传用药清单显示
    beforeUploadForm4(file) {
      // console.log('file12',file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('只能是png/jpg/jpeg格式!');
      }
      if (!isLt2M) {
        this.$message.error('大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传用药清单
    handleUpdateForm4(param) {
      this.fileList4.push(param.file);
    },
    submitFileForm4(){
      this.$refs.upload4.submit();
      let that = this;
      let formData = new FormData();
      this.fileList4.forEach(v=>{
        formData.append('files',v);
      })
      uploadTmage1(formData).then(response => {
        this.fileList4=[];
        // this.urlImage = response.url;
        this.form.medications = response.fileName
        if (this.form.medications.length!= 0) {
          this.show4 = false;
        } else {
          this.show4 = true;
        }
        this.upload4.open=false
        // console.log('res', response)
      })
    },
    // 上传其他图片显示
    beforeUploadForm5(file) {
      // console.log('file12',file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('只能是png/jpg/jpeg格式!');

      }
      if (!isLt2M) {
        this.$message.error('大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传其他图片
    handleUpdateForm5(param) {
      this.fileList5.push(param.file);
    },
    submitFileForm5(){
      this.$refs.upload5.submit();
      let that = this;
      let formData = new FormData();
      this.fileList5.forEach(v=>{
        formData.append('files',v);
      })
      uploadTmage1(formData).then(response => {
        this.fileList5=[];
        // this.urlImage = response.url;
        this.form.other = response.fileName
        if (  this.form.other.length!= 0) {
          this.show5 = false;
        } else {
          this.show5 = true;
        }
        this.upload5.open=false
        // console.log('res', response)
      })
    }
  }
}
</script>

<style scoped>

</style>
